{% extends "../layouts/admin.html" %}
{% block content %}
<aside class="sidebar-250 canvas-right bg-default ">
  <header class="header navbar clearfix bb bg-default pl0 pr0">
    <p class="navbar-text"><i class="fa fa-sitemap mr5"></i> 单位列表</p>
  </header>
  <div class="content-wrap no-p">
    <div class="wrapper2">
      <div class="m5">
        <div id="jsTreeUnit"></div>
      </div>
    </div>
  </div>
</aside>
<section class="content-wrap bg-white">
  <header class="header navbar bg-white shadow">
    <div class="btn-group tool-button">
      <a class="btn btn-primary navbar-btn" href="/system/user/add" data-pjax><i class="ti-plus"></i> 新建用户</a>
      <button class="btn btn-danger navbar-btn" onclick="delCheck()"><i class="ti-close"></i> 删除选中</button>
    </div>
    <div class="pull-right offscreen-right">
      <button class="btn btn-primary navbar-btn" onclick="sublime.toggleFilter('.cd-panel')"><i
          class="fa fa-sliders"></i> 筛选
      </button>
    </div>
  </header>
  <div class=panel-body style="padding-top: 50px;">
    <div class="table-responsive no-border">
      <input id="unitid" type="hidden">
      <table class="table table-bordered table-striped mg-t datatable">
        <thead>
        <tr>
          <th>用户名</th>
          <th>姓名</th>
          <th>状态</th>
          <th>是否在线</th>
          <th>创建时间</th>
          <th>操作</th>
      </table>
    </div>
  </div>
</section>
<div class="cd-panel from-right">
  <header class="cd-panel-header">
    <h4>高级筛选</h4>
  </header>
  <div class="cd-panel-container">
    <div class="cd-panel-content shadow">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" onclick="this.value=''" class="form-control" placeholder="用户名/登录名" autofocus>
      </div>
      <div class="form-group">
        <label for="nickname">姓名</label>
        <input type="text" id="nickname" name="nickname" onclick="this.value=''" class="form-control" placeholder="姓名/昵称">
      </div>
      <button id="searchBtn" type="button" class="btn btn-default">查询</button>
    </div>
  </div>
</div>
<!-- 删除用户 -->
<div id="dialogDelete" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">删除用户</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12">
            用户删除后无法恢复，确定删除吗？ <br/>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
        <button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
      </div>
    </div>
  </div>
</div>
<!-- 删除选中用户 -->
<div id="dialogDeleteCheck" class="modal fade bs-modal-lg" tabindex="-2" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">删除用户</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12 mb10">
            用户删除后无法恢复，确定删除已选用户吗？
          </div>
          <div class="col-xs-12">
            <ul id="checkedUser" class="list-group"></ul>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
        <button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
      </div>
    </div>
  </div>
</div>
<!-- 用户详情 -->
<div id="dialogUserDetail" class="modal fade bs-modal-sm" tabindex="-3" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

    </div>
  </div>
</div>
<div id="dialogUserRightDetail" class="modal fade bs-modal-sm" tabindex="-3" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

    </div>
  </div>
</div>
<div id="dialogPaasword" class="modal fade bs-modal-sm" tabindex="-3" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">重置密码</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">知道了</button>
      </div>
    </div>
  </div>
</div>

<script language="JavaScript">
  var datatable;
  function initDatatable() {
    datatable = $('.datatable').DataTable({
      "dom": '<"toolbar">frtip',
      "searching":false,
      "processing": false,
      "serverSide": true,
      "select": true,
      "ordering": true,
      "language": {
        "url": "/assets/plugins/datatables/cn.json"
      },
      "preDrawCallback": function () {
        sublime.showLoadingbar($(".main-content"));
      },
      "drawCallback": function () {
        sublime.closeLoadingbar($(".main-content"));
      },
      "ajax": {
        "url": "/system/user/index",
        "type": "post",
        "data": function (d) {
          d.unitid = $('#unitid').val();
          d.username = $('#username').val();
          d.nickname = $('#nickname').val();
        }
      },
      "order": [[4, "desc"]],
      "columns": [
        {"data": "username", "bSortable": true},
        {"data": "nickname", "bSortable": true},
        {"data": "status", "bSortable": true},
        {"data": "online", "bSortable": true},
         {"data": "create_time", "bSortable": true}
      ],
      "columnDefs": [
        {
          "render": function (data, type, row) {
            return '<div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">' +
              ' <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">' +
              '<li><a href="/system/user/detail?id=' + row.id + '" data-toggle="modal" data-target="#dialogUserDetail">基本信息</a></li>' +
              '<li><a href="/system/user/rule?id=' + row.id + '" data-toggle="modal" data-target="#dialogUserRightDetail">查看权限</a></li>' +
              '<li class="divider"></li>' +
              '<li><a href="/system/user/edit?id=' + row.id + '" data-pjax>修改信息</a></li>' +
              '<li><a href="javascript:;" onclick="resetPwd(' + row.id + ')">密码重置</a></li>' +
              '<li class="divider"></li>' +
              '<li><a href="javascript:;" onclick="del(' + row.id + ')">删除</a></li>' +
              '<li class="divider"></li>' +
              '<li><a href="javascript:;" onclick="enableUser(' + row.id + ')">启用</a></li>' +
              '<li><a href="javascript:;" onclick="disableUser(' + row.id + ')">禁用</a></li>' +
              '</ul></div>';
          },
          "targets": 5
        },
        {
          "render": function (data, type, row) {
            if (data) {
              return '<i class="fa fa-circle text-success ml5"></i>';
            } else {
              return '<i class="fa fa-circle text-danger ml5"></i>';
            }
          },
          "targets": 3
        },
        {
          "render": function (data, type, row) {
            if (data) {
              return '<i id="disable_' + row.id + '" class="fa fa-circle text-success ml5"></i>';
            } else {
              return '<i id="disable_' + row.id + '" class="fa fa-circle text-danger ml5"></i>';
            }
          },
          "targets": 2
        },
        {
					"render": function(data, type, row) {
						
						return sublime.datetime(data);
					},
					"targets": 4
				}
      ]
    });
    datatable.on('click', 'tr', function () {
      $(this).toggleClass('selected');
    });
    $("#searchBtn").on('click', function () {
      datatable.ajax.reload();
    });
  }
  var unitTreeTable;
  var selected = [];
  function initTreeView() {
    $("#jsTreeUnit").jstree({
      plugins: ["wholerow"],
      core: {
        data: {
          url: function (node) {
          	console.log(node)
            return node.id === "#" ? "/system/user/tree" : "/system/user/tree?pid=" + node.id
          }
        },
        multiple: false
      }
    }).on("select_node.jstree", function (node, selected) {
      var id = selected.selected;
      $("#unitid").val(id);
      $("#searchForm").find("input[type='text']").val("");
      if (datatable) {
        $(".cd-panel-content").find("input").val("");
        datatable.ajax.reload();
      } else {
        initDatatable(); 
        
      }
      
    }).on("loaded.jstree", function (node, jstree) {
      $(node.target).find("li:first div").addClass("jstree-wholerow-clicked");
    });
  }
  function del(id) {
    var dialog = $("#dialogDelete");
    dialog.modal("show");
    dialog.find("#ok").unbind("click");
    dialog.find("#ok").bind("click", function (event) {
      var btn = $(this);
      btn.button("loading");
      $.post("/system/user/delete", {id: id}, function (data) {
        if (data.errno == 0) {
          datatable.ajax.reload(null,false);
        } else {
          Toast.error(data.errmsg);
        }
        //重置按钮状态，关闭提示框
        btn.button("reset");
        dialog.modal("hide");
      }, "json");
    });
  }
  function delCheck() {
    var chks = datatable.rows('.selected').data();
    if (chks.length > 0) {
      var ids = [];
      $.each(datatable.rows('.selected').data(), function (i, n) {
        ids.push(n.id);
      });
      var dialog = $("#dialogDeleteCheck");
      dialog.modal("show");
      dialog.find("#ok").unbind("click");
      dialog.find("#ok").bind("click", function (event) {
        var btn = $(this);
        btn.button("loading");
 
        $.post("/system/user/delete", {"id": ids}, function (data) {
          if (data.errno == 0) {
            datatable.ajax.reload(null,false);
          } else {
            Toast.error(data.errmsg);
          }
          btn.button("reset");
          dialog.modal("hide");
        }, "json");
      });
    } else {
      Toast.warning("请先选择要删除的用户！");
    }
  }
  function enableUser(id) {
    $.post("/system/user/status", {id:  id,status: 1}, function (data) {
      if (data.errno == 0) {
        $("#disable_" + id).attr("class", "fa fa-circle text-success ml5");
      } else {
        Toast.error(data.errmsg);
      }
    }, "json");
  }
  function disableUser(id) {
    $.post("/system/user/status", {id:  id,status: 0}, function (data) {
      if (data.errno == 0) {
        $("#disable_" + id).attr("class", "fa fa-circle text-danger ml5");
      } else {
        Toast.error(data.errmsg);
      }
    }, "json");
  }
  function resetPwd(id) {
    $.post("/system/user/resetpwd", {id:  id}, function (data) {
      var dialog = $("#dialogPaasword");
      if (data.errno == 0) {
        dialog.find(".col-xs-12").html("密码重置成功，请复制新密码：" + data.data);
        dialog.modal("show");
      } else {
        dialog.find(".col-xs-12").html(data.errmsg);
        dialog.modal("show");
      }
    }, "json");
  }
  $(document).ready(function () {
    initDatatable();
    initTreeView();
    $("#dialogUserDetail").on("hidden.bs.modal", function () {
      $(this).removeData("bs.modal");
    });
    $("#dialogUserRightDetail").on("hidden.bs.modal", function () {
      $(this).removeData("bs.modal");
    });
    $("#dialogPaasword").on("hidden.bs.modal", function () {
      $(this).removeData("bs.modal");
    });
  });

</script>
{% endblock %}